import React from 'react';
import { Card, Table, Modal, Button, message, Badge } from 'antd';
// import axios from 'axios';
import axios from './../../axios/index';
import Utils from './../../utils/utils';
export default class BasicTable extends React.Component {

    state={
        
    }
    params={
        page:1
    }

    componentDidMount(){
        this.request();
    }

    request = () => {
        let _this= this;
        axios.ajax({
            url: '/table/high/list',
            data: {
                params: {
                    page: this.params.page
                },
                // isShowLoading:false //关闭loading
            }
        }).then((res) => {
            if (res.code == 0) {
                res.result.list.map((item, index) => {
                    item.key = index;
                })
                this.setState({
                    dataSource: res.result.list,
                    // selectedRowKeys:[],
                    // selectedRows: null,
                    // pagination:Utils.pagination(res,(current)=>{
                    //     _this.params.page = current;
                    //     this.request();
                    // })
                })
            }
        })
    }

    handleChange = (pagination, filters, sorter)=>{
        console.log("::" + sorter)
        this.setState({
            sortOrder:sorter.order
        })
    }

    handleDelete=(item)=>{
        let id = item.id;
        Modal.confirm({
            title: '确认',
            content: '您确认要删除此条数据吗？',
            onOk:()=>{
                message.success('删除成功');
                this.request();
            }
        })
    }

    render() {
        const columns = [
            {
                title: 'id',
                width: 80,
                dataIndex: 'id'
            },
            {
                title: '用户名',
                width: 80,
                dataIndex: 'userName'
            },
            {
                title: '性别',
                width: 80,
                dataIndex: 'sex',
                render(sex) {
                    return sex == 1 ? '男' : '女'
                }
            },
            {
                title: '状态',
                width: 80,
                dataIndex: 'state',
                render(state) {
                    let config = {
                        '1': '咸鱼一条',
                        '2': '清华才子',
                        '3': '紫起上道',
                        '4': '大导演',
                        '5': '皮卡丘',
                        '6': '水鱼',
                    }
                    return config[state];
                }
            },
            {
                title: '爱好',
                width: 80,
                dataIndex: 'interest',
                render(interest) {
                    let config = {
                        '1': '篮球',
                        '2': '游泳',
                        '3': '羽毛球',
                        '4': '跳舞',
                        '5': '唱K',
                        '6': '爬山',
                        '7': '踢毽子',
                        '8': '台球',
                    }
                    return config[interest];
                }
            },
            {
                title: '生日',
                width: 120,
                dataIndex: 'birthday'
            },
            {
                title: '地址',
                width: 120,
                dataIndex: 'address'
            },
            {
                title: '早起时间',
                width: 80,
                dataIndex: 'time'
            },
        ]

        const columns2 = [
            {
                title: 'id',
                width: 80,
                fixed:'left',
                dataIndex: 'id'
            },
            {
                title: '用户名',
                width: 80,
                fixed:'left',
                dataIndex: 'userName'
            },
            {
                title: '性别',
                width: 80,
                dataIndex: 'sex',
                render(sex) {
                    return sex == 1 ? '男' : '女'
                }
            },
            {
                title: '状态',
                width: 80,
                dataIndex: 'state',
                render(state) {
                    let config = {
                        '1': '咸鱼一条',
                        '2': '清华才子',
                        '3': '紫起上道',
                        '4': '大导演',
                        '5': '皮卡丘',
                        '6': '水鱼',
                    }
                    return config[state];
                }
            },
            {
                title: '爱好',
                width: 80,
                dataIndex: 'interest',
                render(interest) {
                    let config = {
                        '1': '篮球',
                        '2': '游泳',
                        '3': '羽毛球',
                        '4': '跳舞',
                        '5': '唱K',
                        '6': '爬山',
                        '7': '踢毽子',
                        '8': '台球',
                    }
                    return config[interest];
                }
            },
            {
                title: '生日',
                width: 120,
                dataIndex: 'birthday'
            },
            {
                title: '生日',
                width: 120,
                dataIndex: 'birthday'
            },
            {
                title: '生日',
                width: 120,
                dataIndex: 'birthday'
            },
            {
                title: '生日',
                width: 120,
                dataIndex: 'birthday'
            },
            {
                title: '地址',
                width: 120,
                dataIndex: 'address'
            },
            {
                title: '生日',
                width: 120,
                dataIndex: 'birthday'
            },
            {
                title: '生日',
                width: 120,
                dataIndex: 'birthday'
            },
            {
                title: '早起时间',
                width: 80,
                fixed:'right',
                dataIndex: 'time'
            },
        ]


        const columns3 = [
            {
                title: 'id',
                dataIndex: 'id'
            },
            {
                title: '用户名',
                dataIndex: 'userName'
            },
            {
                title: '性别',
                dataIndex: 'sex',
                render(sex) {
                    return sex == 1 ? '男' : '女'
                }
                
            },
            {
                title: '年龄',
                dataIndex: 'age',
                sorter:(a,b)=>{
                    return a.age -b.age;
                },
                sortOrder:this.state.sortOrder
            },
            {
                title: '状态',
                dataIndex: 'state',
                render(state) {
                    let config = {
                        '1': '风华浪子',
                        '2': '清华才子',
                        '3': '紫起上道',
                        '4': '大导演',
                        '5': '皮卡丘',
                        '6': '水鱼',
                    }
                    return config[state];
                }
            },
            {
                title: '爱好',
                dataIndex: 'interest',
                render(interest) {
                    let config = {
                        '1': <Badge status="success" text="打篮球"></Badge>,
                        '2': <Badge status="success" text="游泳"></Badge>,
                        '3': <Badge status="success" text="羽毛球"></Badge>,
                        '4': <Badge status="success" text="跳舞"></Badge>,
                        '5': <Badge status="success" text="唱K"></Badge>,
                        '6': <Badge status="success" text="爬山"></Badge>,
                        '7': <Badge status="success" text="踢毽子"></Badge>,
                        '8': <Badge status="success" text="台球"></Badge>,
                    }
                    return config[interest];
                }
            },
            {
                title: '生日',
                dataIndex: 'birthday'
            },
            {
                title: '地址',
                dataIndex: 'address'
            },
            {
                title: '操作',
                render:(text, item)=>{
                    return <Button size="small" onClick={(item)=>{this.handleDelete(item)}}>删除</Button>
                }
            },
        ]

        return (
            <div>
                <Card title="头部固定">
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.dataSource}
                        pagination={false}
                        scroll={{y:240}}
                    />
                </Card>
                <Card title="左侧固定" style={{ margin: '10px 0' }}>
                    <Table
                        bordered
                        columns={columns2}
                        dataSource={this.state.dataSource}
                        pagination={false}
                        scroll={{x:1329}}
                    />
                </Card>
                <Card title="表格排序" style={{ margin: '10px 0' }}>
                    <Table
                        bordered
                        columns={columns3}
                        dataSource={this.state.dataSource}
                        pagination={false}
                        onChange={this.handleChange}
                    />
                </Card>
                <Card title="操作按钮" style={{ margin: '10px 0' }}>
                    <Table
                        bordered
                        columns={columns3}
                        dataSource={this.state.dataSource}
                        pagination={false}
                        
                    />
                </Card>
            </div>
        );
    }
}